<!-- pages/points/points.vue -->
<template>
	<view class="container">
		<!-- 标题 -->
		<!-- <custom-navbar title="积分专区" dispaly="none" :showBack="false">
		</custom-navbar> -->
		<my-points></my-points>
		<!-- 订单 -->
		<scroll-view class="section-wrapper" scroll-y @scrolltolower="loadMore" :lower-threshold="100">

			<up-waterfall v-model="orderList" :col="2">
				<template v-slot:left="{ leftList }">
					<goods-card v-for="(item, index) in leftList" :key="item.id" :data="item" :is-special="index < 2"
						@click="toDetails(item.id)" />
				</template>
				<template v-slot:right="{ rightList }">
					<goods-card v-for="(item, index) in rightList" :key="item.id" :data="item" :is-special="index < 2"
						@click="toDetails(item.id)" />
				</template>
			</up-waterfall>
			<u-loadmore
				:status="loadStatus"
			    :loading-text="loadingText" 
			    :loadmore-text="loadmoreText" 
			    :nomore-text="nomoreText"
				marginTop="72rpx"
				color="#999"
				lineColor="#D9DCE2"
				line
				lineWidth="99rpx"
			 />
		</scroll-view>
		<!-- 底部导航 -->
		<!-- <custom-tabbar :current="0" /> -->
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import CustomNavbar from '../../components/CustomNavbar.vue'
	import GoodsCard from '@/components/GoodsCard.vue'
	import MyPoints from '../../components/MyPoints.vue'
	import CustomTabbar from '@/components/CustomTabbar.vue'

	// 列表数据
	const orderList = ref([])
	// 当前页码
	const currentPage = ref(1)
	// 是否正在加载
	const loading = ref(false)
	// 加载状态提示
	const loadingText = ref('努力加载中');
	const loadmoreText = ref('滑动加载更多');
	const nomoreText = ref('实在没有了');
	// 是否还有更多数据
	const hasMore = ref(true)
	// 滚动区域高度
	const scrollHeight = ref(0)
	// 加载状态
	const loadStatus = ref('loadmore')
	// 订单专区数据
	const getListData = async (page = 1) => {
		try {
			loading.value = true
			loadStatus.value = 'loading'
			const postData = {
				page,
				goods_type: 3,
				keywords: ''

			}
			// 接口请求
			await uni.$api.common.getGoodList(postData).then(res => {
				const result = res.data;
				if (page === 1) orderList.value = []
				const data = ref(res.data.data.map((item, i) => ({
					id: item.id,
					title: item.goods_name,
					price: `${item.goods_price.toFixed(0)}积分`,
					// oldPrice: `${item.market_price.toFixed(0)}积分`,
					count: `已兑${item.sales.toFixed(0)}`,
					image: item.goods_image
				})));
				orderList.value = [...orderList.value, ...data.value];

				hasMore.value = page < res.data.last_page;
				loadStatus.value = hasMore.value ? 'loadmore' : 'nomore'
			})


		} finally {
			loading.value = false
		}
	}
	// 加载更多
	const loadMore = () => {
		if (!loading.value && hasMore.value) {
			currentPage.value++
			getListData(currentPage.value)
		}
	}
	const toDetails = (id) => {
		uni.navigateTo({
			url: '/goodsPages/pages/goods/points?id=' + id
		})
	}
	onShow(() => {
		getListData(1)
	})
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	page{
		
		height: 100vh;
		overflow-y: hidden;
	}
	.container {
		padding-bottom: 120rpx;
		background: url('/static/index_slices/index_bg.png') no-repeat;
		background-size: 100% auto;
		padding-top: 8rpx;
		/* 导航栏高度 */
	}

	.section-wrapper {
		margin-top: -18rpx;
		padding: 30rpx;
		background-color: #EFF2F6;
		border-radius: 46rpx 46rpx 0 0;
		box-sizing: border-box;
		height: calc(100vh - 220px);
		padding-bottom: 70rpx;
	}
</style>